<template>
    <div>  

        <el-form 
        :model="ruleForm" 
        :rules="rules" 
        ref="ruleForm" 
        label-width="150px" 
        class="demo-ruleForm">
            <el-form-item 
            label="建筑物/商铺名称" 
            :inline="true" 
            prop="building">
                <el-select 
                class='building-shop' 
                v-model="ruleForm.building " 
                @change='getListIndex' 
                placeholder="建筑物">
                    <el-option 
                    v-for='item in building' 
                    :value="item.buildIdStr" 
                    :label='item.buildName' 
                    :key='item.buildIdStr'>
                    </el-option>
                </el-select>
                <el-select 
                class='building-shop' 
                clearable 
                @change='getPoiId' 
                @clear='handleClear' 
                v-model="ruleForm.shopList " 
                placeholder="商铺名称">
                    <el-option 
                    v-for='item in shopList' 
                    :value="item.id" 
                    :label='item.poiName' 
                    :key='item.id'>
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="活动名称" prop="name">
                <el-input 
                v-model="ruleForm.name" 
                style='width:300px;' 
                placeholder="填写活动名称">
                    
                </el-input>
            </el-form-item>
            <el-form-item label="报名时间" :inline='true' required>
                <div class="block" editable='false' style="display:inline">
                    <el-date-picker
                    required
                    @change='handleDateRange1'
                    v-model="ruleForm.dateRange1"
                    type="datetime"
                    placeholder="选择日期时间">
                    </el-date-picker>
                </div>
                <div class="block" style="display:inline">
                    <el-date-picker
                    required
                    @change='handleDateRange2'
                    v-model="ruleForm.dateRange2"
                    type="datetime"
                    placeholder="选择日期时间">
                    </el-date-picker>
                </div>
            </el-form-item>
            <el-form-item label="活动日期" required>
                <el-col :span="7">
                    <el-form-item>
                        <el-date-picker 
                        @change='handleDate1' 
                        v-model='ruleForm.date1' 
                        type="date"
                        placeholder="选择开始日期" 
                        format='yyyy-MM-dd' 
                        style="width: 100%;">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col class="line" :span="3">
                    <div class="line">-</div>
                </el-col>
                <el-col :span="7">
                    <el-form-item>
                        <el-date-picker 
                        type="date"  
                        placeholder="选择结束日期" 
                        @change='handleDate2' 
                        v-model='ruleForm.date2' 
                        style="width: 100%;"  
                        format='yyyy-MM-dd'>
                            
                        </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-form-item>
            <el-form-item label="活动时间" required>
                <el-col :span="7">
                    <el-form-item>
                        <el-time-picker 
                        format='HH:mm:ss' 
                        @change='getTimePicker1' 
                        placeholder="选择开始时间"  
                        v-model='ruleForm.time1' 
                        style="width: 100%;">
                            
                        </el-time-picker>
                    </el-form-item>
                </el-col>
                <el-col class="line" :span="2">-</el-col>
                <el-col :span="7">
                    <el-form-item>
                        <el-time-picker 
                        placeholder="选择结束时间" 
                        @change='getTimePicker2' 
                        v-model='ruleForm.time2' 
                        style="width: 100%;">
                            
                        </el-time-picker>
                    </el-form-item>
                </el-col>
            </el-form-item>
            <el-form-item label="选择分类">
                <el-select 
                class='info-select' 
                clearable 
                @clear='handleClearClass' 
                v-model="ruleForm.choice" 
                @change='getClassifyId' 
                placeholder="请选择分类">
                    <el-option 
                    v-for='item in classifylist' 
                    :label="item.classifyName?item.classifyName:''" 
                    :key='item.id' 
                    :value="item.id">
                        
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="活动地址" prop="desc">
                <el-input 
                class='info-input' 
                type="textarea" 
                v-model="ruleForm.desc" 
                placeholder='请填写具体的活动地点,如L2-30'>
                    
                </el-input>
            </el-form-item>
            <el-form-item label="活动标签">
                <el-button 
                type="primary" 
                class='set-btn' 
                @click='handleActivityTag'>
                    设置活动标签
                </el-button>
<!--     <span class="codition">(最多可添加五个标签)</span> -->
            </el-form-item>
            <el-form-item label="">
                <div class="taglist" v-show='isShowTransfer'>
                    <el-button class='tag-name'
                      type="success"
                      v-for="tag in taglist"
                      :key='tag.tagId'
                      :disable-transitions="false"
                      @click="handleClose(tag)">
                      {{tag.tagname}}
                    </el-button>
                </div>
            </el-form-item>
            <el-form-item label='已选标签'>
                <div class="taglist-checked">
                    <el-tag class='tag-name'
                    :key="tag.index"
                    v-for="tag in tagCheckedName"
                    closable
                    :disable-transitions="false"
                    @close="handleCheckedName(tag)">
                    {{tag.tagname}}
                    </el-tag>
                </div>
            </el-form-item>
            <el-form-item label='活动详情' required>
                <div v-for='(item,index) in ruleForm.module_list' :key='item[index]' class='clear'>
                    <div class="moudle-title">
                        <div>
                            <span style='padding-right:10px;color:"#999"'>显示名称</span>
                            <el-input 
                            style='width:200px;' 
                            v-model="item.modelname" 
                            placeholder="模块名称">
                            </el-input>
                        </div>
                        <div>
                            <span class="action-post-type" @click='handleMoudleTop(index)'>上移</span>
                            <span class="action-post-type" @click='handleMoudleBottom(index)'>下移</span>
                            <span class="change-type" @click='handleDeleteEditor(index)'>
                                <i class="el-icon-delete"></i>删除</span>
                        </div>
                    </div>
                    <div class="edit_container" style="position:relative;width:800px;">
                        
                        <quill-editor 
                        style='width:750px;min-height:150px;color:#000;' 
                        v-model="item.connect"
                        ref="myQuillEditor" 
                        class='editor1'
                        :options="editorOption"
                        @change='onMoudleChange(index)' 
                        @ready="onEditorReady(index)"  
                        @focus='getIndex(index)'>   
                        </quill-editor>
                        <el-upload
                        class='avatar-uploader'
                        style=''
                        :action="RTRoot+'/marketweb/img/uploadImg?width=600&height=300'"
                        :show-file-list='false'
                        ref='upload'
                        :before-upload='handleBeforeMoudle'
                        :on-success="handleSuccessMoudle">
                            <i class="el-icon-plus" style="filter:Alpha(opacity=0);opacity:0;"></i>
                        </el-upload>
                    </div>
                </div>
            </el-form-item>
            <el-form-item>
                <el-button 
                class="add-new-moudle" 
                @click='handleAddMoudle'>
                    <i class="el-icon-plus"></i>添加活动详情模块
                </el-button>
            </el-form-item>
   
            <el-form-item label='活动海报'>
                <div class='activity-post'>
                    <div>活动海报图</div>
                    <div>
                        <el-button 
                        class="add-post" 
                        @click='addPost'>
                            <i class="el-icon-plus"></i>添加活动海报
                        </el-button>
                    </div>
                </div>
                <div 
                style='position:relative' 
                class="post-list" 
                v-for='(item,index) in ruleForm.post_list' 
                :key='item.index'>
                    <div>
                        <el-upload
                         class='upload-img'
                          :action="RTRoot+'/marketweb/img/uploadImg?width=750&height=340'"
                          :show-file-list='false'
                          :before-upload='handleBeforePost'
                          :on-success='handleSuccess'>
                            <i class="el-icon-plus"></i>
                        </el-upload>
                        <div class="el-upload__tip" slot="tip">只能上传jpg，且不超过1M</div>
                    </div>
                    <div>
                        <img 
                        ref='imgList' 
                        v-show='item.posterimg' 
                        style='display:inline-block;position:absolute;left:15px;top:0' 
                        width="180" 
                        height="110" 
                        :src="item.posterimg" 
                        alt="">
                    </div>
                    <div class="action-post">
                        <span class="action-post-type" @click='handleDeletePost(index)'>删除</span>
                        <span class="action-post-type" @click='handlePositionTop(index)'>上移</span>
                        <span class="action-post-type" @click='handlePositionBottom(index)'>下移</span>
                        <div>banner跳转链接:
                            <input type="text" placeholder="http://" class='banner-link' v-model='item.path'>
                        </div>
                    </div> 
                </div>
            </el-form-item>
            <el-form-item label="是否显示主办方信息">
                <el-switch on-text="开" off-text="关" v-model="ruleForm.sponsorStatus">
                </el-switch>
            </el-form-item>
            <el-form-item v-if='ruleForm.sponsorStatus' label="主办方电话" style='width:50%'>
                <el-input v-model="ruleForm.phone" placeholder="填写个人电话号码">
                    
                </el-input>
            </el-form-item>
            <el-form-item 
            v-if='ruleForm.sponsorStatus' 
            label="主办方邮箱" 
            prop="email" 
            style='width:50%'>
                <el-input type='email' v-model="ruleForm.email" placeholder="填写个人邮箱">
                    
                </el-input>
            </el-form-item>
            <el-form-item 
            style='overflow:hidden' 
            v-if='ruleForm.sponsorStatus' 
            label='主办方LOGO'>
                <div 
                style="float:left;width:150px;height:150px;margin-right:10px;" 
                v-show='dialogImageUrl != ""'>
                    <img width="150" height="150" :src="dialogImageUrl">
                </div>
                <div style="float:left;width:150px;height:200px;">
                    <el-upload
                    style='display:inline-block'
                    :action="RTRoot+'/marketweb/img/uploadImgNoLimit'"
                    list-type="picture-card"
                    :show-file-list='false'
                    :on-success="handlePictureCardSucc"
                    :before-upload='beforeAvatarUpload'>
                    <i class="el-icon-plus"></i>
                    </el-upload>
                    <div class="el-upload__tip" style="color:#f00;margin-top:5px;" slot="tip">建议上传200*200图片，且不超过500kb
                    </div>
                </div>
            </el-form-item>
            <el-form-item v-show='ruleForm.sponsorStatus'>
                <div style="position:relative;width:800px;">
                    <quill-editor  
                    style='color:#000;'
                    v-model="ruleForm.sponsorinfo"
                    ref="myQuillEditor1"
                    :options="editorOption1"
                    @focus='getIndex1'
                    class="editer">
                    </quill-editor>
                    <el-upload
                    class='sponsor-upload'
                    style='display:none;'
                    :action="RTRoot+'/marketweb/img/uploadImg?width=600&height=300'"
                    :show-file-list='false'
                    ref='upload'
                    :before-upload='handleBeforeMoudle'
                    :on-success="handleSuccessSpon">
                        <i class="el-icon-plus" style="filter:Alpha(opacity=0);opacity:0;"></i>
                    </el-upload>
                </div>
            </el-form-item>
            <el-form-item label="分享标题:" style="width:50%" placeholder='请输入标题'>
                <el-input class='form-content' v-model="ruleForm.asharetitle"></el-input>
            </el-form-item>
            <el-form-item label="分享描述:"  style="width:50%">
                <textarea class='form-content form-content-text' v-model="ruleForm.asharedetail"></textarea>
            </el-form-item>
            <el-form-item label='分享图片:'>
				<div style="overflow:hidden">
				    <div v-show='posterimgshare' style='float:left;margin-right:10px;position:relative;'>
                        <img ref='imgList' style='display:inline-block;' width="150" height="150" :src="posterimgshare" alt="">
                         <div class="close" @click='handleCLoseImg'>×</div>
          		    </div>
                    <el-upload 
                        v-show='!posterimgshare' 
                        style='float:left;'
                        class='upload-share'
                        :action="RTRoot+'/marketweb/img/uploadImg?width=300&height=300'"
                        :show-file-list='false'
                        :before-upload='handleBeforePostShare'
                        :on-success='handleSuccessShare'>
                        <i class="el-icon-plus"></i>
                    </el-upload>	
                </div>
            	<div style="display:block;padding-left:10px;color:#f00;font-size:14px;">*大小须小于100K，建议上传正方形图片</div>
            </el-form-item>
            <el-form-item class='result'>
                <el-button type="primary" @click="submitForm" >下一页</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
 import moment from 'moment'
 import Quill from 'quill'
 import { quillEditor } from 'vue-quill-editor'
 import { VueEditor } from 'vue2-editor'  

 let SizeStyle = Quill.import('attributors/style/size');
 Quill.register(SizeStyle, true);
 let AlignStyle = Quill.import('attributors/style/align');
 Quill.register(AlignStyle, true);

 const toolbarOptions = [
    ['bold', 'italic', 'underline', 'strike'],
    ['blockquote', 'code-block'],
    [{ 'header': 1 }, { 'header': 2 }],
    [{ 'list': 'ordered'}, { 'list': 'bullet' }],
    [{ 'script': 'sub'}, { 'script': 'super' }],
    [{ 'indent': '-1'}, { 'indent': '+1' }],
    [{ 'direction': 'rtl' }],
    [{ 'size': ['small', false, 'large', 'huge'] }],
    [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
    [{ 'color': [] }, { 'background': [] }],
    [{ 'font': [] }],
    [{ 'align': [] }],
    ['clean'],
    ['link', 'image', 'video'] ,                // remove formatting button
    // ['sourceEditor']
]
    export default {
        data() {
            return {
                id: this.$route.params.id,
                index:0,
                start:'',
                addRange:'',
                addRange1:'',
                RTRoot:process.env.API_ROOT_URL,
                uploadData:{},
                photoUrl:'' ,        // 上传图片地址
                uploadType: '' ,   // 上传的文件类型（图片、视频）
                fullscreenLoading : false,
                action:null,
                dialogImageUrl:'',
                inputVisible: false,
                inputValue: null,
                classifyId:null,
                tagCheckedName:[],
                tagNameList:[],
                editorOption: {
                    placeholder: '',
                    theme: 'snow',  // or 'bubble'
                    modules: {
                        toolbar: {
                            container: toolbarOptions,  // 工具栏
                            handlers: {
                                'image': function (value) {
                                    if (value) {
                                        document.querySelector('.avatar-uploader input').click()
                                    } else {
                                        this.quill.format('image', false);
                                    }
                                },
                                shadeBox:null,
                                'sourceEditor': function(){     //添加工具方法
                                       console.log('全屏');
                                }
                            }
                        }
                    },
                    initmoduleButton:function(){
                        const sourceEditorButton = document.querySelector('.ql-sourceEditor');
                        console.log(sourceEditorButton)
                        sourceEditorButton.style.cssText = "width:40px; border:1px solid #ccc; border-radius:5px;";
                        sourceEditorButton.innerText="123";
                    }
                },

                editorOption1: {
                    placeholder: '',
                    theme: 'snow',  // or 'bubble'
                    modules: {
                        toolbar: {
                            container: toolbarOptions,  // 工具栏
                            handlers: {
                                'image': function (value) {
                                    if (value) {
                                        document.querySelector('.sponsor-upload input').click()
                                    } else {
                                        this.quill.format('image', false);
                                    }
                                },
                                shadeBox:null,
                                'sourceEditor': function(){     //添加工具方法
                                       console.log('全屏');
                                }
                            }
                        }
                    },
                    // initButton:function(){
                    //     const sourceEditorButton = document.querySelector('.ql-sourceEditor');
                    //     sourceEditorButton.style.cssText = "width:40px; border:1px solid #ccc; border-radius:5px;";
                    //     sourceEditorButton.innerText="全屏";
                    // }
                },
                building:[],
                buildId:null,
                poiName:'',
                buildName:'',
                FirstBuilding:null,
                posterimg:[],
                classifylist:[],
                shopList:[],
                taglist:null,
                poiId:null,
                posterimgshare:'',
                isShowTransfer:false,
                ruleForm: {
                    name: null,
                    building:null,
                    phone:null,
                    email:null,
                    bannerList:[],
                    shopList:null,
                    dateRange1:null,
                    dateRange2:null,
                    date1: null,
                    asharetitle:'',
                    asharedetail:'',
                    category: '活动详情',
                    date2: null,
                    time1: null,
                    path:null,
                    time2: null,
                    shop:null,
                    choice:null,
                    desc: null,
                    sponsorStatus:null,
                    sponsorinfo:null,
                    module_list:[],
                    post_list:[]
                },
        
                rules: {
                    building:[
                        {required: true}
                    ],
                    tag:[{
                        required:true,
                        message: '请输入标签名称'
                    }],
                    choice:[{
                        required: true,
                        message: '请选择分类'
                    }],
                    shop:[{
                        required:true,message: '请输入商铺名称', trigger: 'blur'
                    }],
                    phone: [
                        { message: '请输入手机号码', trigger: 'blur' },
                        { min:11,max:11, message: '请输入正确的手机号码', trigger: 'blur' }
                    ],
                    email: [
                        { message: '请输入邮箱地址', trigger: 'blur' },
                        { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
                    ],
                    name: [
                        { required: true, message: '请输入活动名称', trigger: 'blur' },
                        { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
                    ],
                    date :[{require:true,message: '请选择日期范围',trigger: 'blur' }],
                    date1: [
                        { required: true, message: '请选择开始日期', trigger: 'blur' }
                    ],
                    time1: [
                        { required: true, message: '请选择开始时间', trigger: 'change' }
                    ],
                    date2: [
                        { required: true, message: '请选择结束日期', trigger: 'change' }
                    ],
                    time2: [
                        { required: true, message: '请选择结束时间', trigger: 'change' }
                    ],
                    desc: [
                        { required: true, message: '请填写活动形式', trigger: 'blur' }
                    ]
                }
            }
        },

        methods: {
        //图文编辑情况
        onEditorReady(index){
            this.index = index
        },

        onMoudleChange(index){
        },
        //获取活动结束日期
        handleDateRange2(val){
            this.ruleForm.dateRange2 = val
        },

        handleCLoseImg(){
            this.posterimgshare = ''
        },

        getTimePicker1(val){
            this.$emit('changeTime1',val)
        },

        getTimePicker2(val){
            this.$emit('changeTime2',val)
        },
        //清空商铺
        handleClear(){
            this.poiId = 0
        },

        handleClearClass(){
            this.ruleForm.choice = ''
        },

        handleBeforePost(file){
            const isJPG = file.type === 'image/jpg';
            const isJPEG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 1;
            if (!isLt2M) {
              this.$message.error('上传头像图片大小不能超过1M!');
            }
            if (!isJPG && !isJPEG) {
                this.$message.error('仅支持上传JPG格式!');
            }

            return (isJPG || isJPEG)  && isLt2M;
        },

        handleBeforePostShare(file){
                const isJPG = file.type === 'image/jpg';
                const isJPEG = file.type === 'image/jpeg';
                 const isLt2M =  file.size / 1024 / 1024 < 0.1;
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过100k!');
            }
                if (!isJPG && !isJPEG) {
                    this.$message.error('仅支持上传JPG格式!');
                }

                return (isJPG || isJPEG)  && isLt2M;
        },

        handleSuccessShare(response){
            this.posterimgshare = response.path;
        },

        beforeAvatarUpload(file) {
            const isJPEG = file.type === 'image/jpeg';
            const isPNG = file.type === 'image/png';
            const isJPG = file.type === 'image/jpg';
            const isLt2M = file.size / 1024 / 1024 < 0.5;
            if (!isLt2M) {
              this.$message.error('图片大小不能超过 500k!');
            }
            if (!isJPG && !isPNG && !isJPEG) {
                    this.$message.error('上传图片必须是JPG/PNG/JPEG 格式!');
            }
            return (isJPG || isJPEG || isPNG) && isLt2M;
        },

        handlePictureCardSucc(response,file,filelist) {
            if(response.code == 0){
              this.dialogImageUrl = response.path;
            }else{
              this.$message.error(response.msg)
            }
        },
      //模块上传图片的规范
        handleBeforeMoudle(file){
            const isJPG = file.type === 'image/jpg';
            const isJPEG = file.type === 'image/jpeg';

            if (!isJPG && !isJPEG) {
                this.$message.error('上传图片只能是 JPG 格式!');
            }
            return (isJPG || isJPEG);
        },
      //获取模块index
        getIndex(index){
            this.index = index
            this.addRange = this.$refs.myQuillEditor[this.index].quill.getSelection()
        },

        getIndex1(){
             this.addRange1 = this.$refs.myQuillEditor1.quill.getSelection()
        },
      //主办方信息上传图片
        handleSuccessSpon(response,file,filelist){
            let quill = this.$refs.myQuillEditor1.quill
            if(response.code == 0){
                let length = quill.getSelection().index;
                // 插入图片  res.info为服务器返回的图片地址
                quill.insertEmbed(length, 'image', response.path)
                // 调整光标到最后
                quill.setSelection(length + 1)
            }else{
                this.$message.error(response.msg)
            }
        },
      //获取商铺id
        getPoiId(val){
            this.ruleForm.shopList = val;
            this.poiId = this.ruleForm.shopList
        },
      //模块图文编辑上传图片
        handleSuccessMoudle(response, file, fileList){
            let quill = this.$refs.myQuillEditor[this.index].quill
            if(response.code == 0){
                let length = quill.getSelection().index;
                // 插入图片  res.info为服务器返回的图片地址
                quill.insertEmbed(length, 'image', response.path)
                // 调整光标到最后
                quill.setSelection(length + 1)
            }else{
                this.$message.error(response.msg)
            }
        },
      //模块上移
        handleMoudleTop(index){
            if(index>=1){
                this.ruleForm.module_list.splice(index-1,0,this.ruleForm.module_list[index])
                this.ruleForm.module_list.splice(index +1,1)
                for (var i = 0; i < this.ruleForm.module_list.length; i++) {
                    this.ruleForm.module_list[i].sn = i;
                }
            }else{
                this.$message('已经是第一个')
            }
        },
        //模块下移
        handleMoudleBottom(index){
            if (index < this.ruleForm.module_list.length-1) {
                this.ruleForm.module_list.splice(index+2,0,this.ruleForm.module_list[index])
                this.ruleForm.module_list.splice(index,1)
                for (var i = 0; i < this.ruleForm.module_list.length; i++) {
                    this.ruleForm.module_list[i].sn = i;
                }
            } else {
                this.$message('已经是最后一个')
            }
        },
      //海报上移
        handlePositionTop(index){
            if(index>=1){
                this.ruleForm.post_list.splice(index-1,0,this.ruleForm.post_list[index])
                this.ruleForm.post_list.splice(index +1,1)
                this.posterimg.splice(index-1,0,this.posterimg[index])
                this.posterimg.splice(index +1,1)

                for (var i = 0; i < this.ruleForm.post_list.length; i++) {
                    this.ruleForm.post_list[i].sn = i;
                    this.ruleForm.post_list[i].posterimg = this.posterimg[i]
                }
            }else{
                this.$message('已经是第一个')
            }
        
        },
      //海报下移
        handlePositionBottom(index){
            if (index < this.ruleForm.post_list.length-1) {
                this.ruleForm.post_list.splice(index+2,0,this.ruleForm.post_list[index])
                this.ruleForm.post_list.splice(index,1)
                this.posterimg.splice(index+2,0,this.posterimg[index])
                this.posterimg.splice(index,1)
                for (var i = 0; i < this.ruleForm.post_list.length; i++) {
                    this.ruleForm.post_list[i].sn = i;
                    this.ruleForm.post_list[i].posterimg = this.posterimg[i]
                }
            } else {
                this.$message('已经是最后一个')
            }
        },
      //获取活动开始时间
        handleDateRange1(val){
            this.ruleForm.dateRange1 = val
        },
      //获取开始date
        handleDate1(val){
            this.ruleForm.date1 = val
            this.$emit('changeDate1',val)
        },
      //获取结束date
        handleDate2(val){
            this.ruleForm.date2 = val
            this.$emit('changeDate2',val)
        },
      //已选标签
        handleClose(tag) {
            this.taglist.splice(this.taglist.indexOf(tag), 1);
            this.tagCheckedName.push(tag)
        },
      //关闭已选标签
        handleCheckedName(tag){
            this.tagCheckedName.splice(this.tagCheckedName.indexOf(tag), 1);
            this.taglist.unshift(tag)
        },
      //获取标签列表
        getTagNameList(){
            this.$http.post(
            'marketweb/actionback/queryTags', {
                keyAdmin:this.$store.state.keyAdmin,
                columnId:this.$store.state.columnId
            }).then(response => {
                this.taglist = response.body.taglist
                for (var i = 0; i < this.taglist.length; i++) {
                    for (var j = 0; j < this.tagCheckedName.length; j++) {
                        if(this.tagCheckedName[j].tagname==this.taglist[i].tagname){
                          this.taglist.splice(i,1)
                        }
                    }
                }
            }, response => {
                this.$message.error("获取标签名称失败");
            })
        },
      //获取buildId
        getListIndex(event){
            this.shopList = '';
            if (this.FirstBuilding != event) {
                this.ruleForm.shopList = ''
            }
            this.ruleForm.building = event
            this.buildId = this.ruleForm.building
            this.getShopName()
        },
      //获取商铺列表
        getShopName(){
            this.$http.post('marketweb/mappoi/queryPois',{
                keyAdmin:this.$store.state.keyAdmin,
                buildId:this.buildId
            }).then(response=>{
                if(response.body.code == 200){
                    this.shopList = response.body.poilist;
                }else{
                    this.$message.error(response.body.msg)
                } 
            },response=>{
                this.$message.error("获取店铺数据失败");
            })
        
        },

        handleChangePoster(file, fileList) {
        },
      //添加新模块
        handleAddMoudle(){
            this.ruleForm.module_list.push({
                modelname:'',
                connect:'',
                sn:this.ruleForm.module_list.length,
                backflag:0
            });
        },
      //时间函数，将时间对象转化为时间字符串
        timeFormat(date,i){
    
            if(i=1){
                date= '2017-12-12 '+date;
            } 
            var t=Date.parse(date) 
            if (!isNaN(t)) {  
                return new Date(Date.parse(date.replace(/-/g, "/")));  
            } else {  
                return new Date();  
            }  
        },
     //海报上传图片成功
        handleSuccess(response, file, fileList){
            if(response.code == 0){
                this.posterimg.push(response.path)
                for (let i = 0; i < this.ruleForm.post_list.length; i++) {
                    this.ruleForm.post_list[i].posterimg = this.posterimg[i]
                }
            }else{
                this.$message.error(response.msg)
            }
        
        },
      //删除模块
        handleDeleteEditor(index){
            if(this.ruleForm.module_list.length>1){
                this.ruleForm.module_list.splice(index,1)
                for (var i = 0; i < this.ruleForm.module_list.length; i++) {
                    this.ruleForm.module_list[i].sn = i
                }
            }else{
                this.$message.error('不能再删除')
            }
        },

      //删除海报
        handleDeletePost(index){
            if(this.ruleForm.post_list.length>1){
                this.ruleForm.post_list.splice(index,1)
                this.posterimg.splice(index,1)
                for (var i = 0; i < this.ruleForm.post_list.length; i++) {
                    this.ruleForm.post_list[i].sn = i
                }
            }else{
                this.$message.error('不可以再删除')
            }
        
        },
      //显示/关闭 标签
        handleActivityTag(){
            this.isShowTransfer = !this.isShowTransfer;
        },
      //获取分类列表
        handleClassifyList(){
            this.$http.post(
            'marketweb/actionclassify/queryActionclassifys',{
                keyAdmin:this.$store.state.keyAdmin
            }).then(response => {
                    if(response.body.code==200){
                        this.classifylist = response.body.classifylist;
                    }else{
                        this.$message.error(response.body.msg)
                    }       
            }, response => {
                this.$message.error('获取分类列表失败')
            })
        },
      //获取分类Id
        getClassifyId($event){
            this.ruleForm.choice = $event
        },
      //添加海报
        addPost(){
            if(this.ruleForm.post_list.length<5){
                this.ruleForm.post_list.push({
                    posterimg:'',
                    path:'',
                    backflag:0,
                    sn:this.ruleForm.post_list.length
                });
            }else{
                this.$message.error('最多上传五张海报')
            }
        },

        changeModelReverse(){
            for (var i = 0; i < this.ruleForm.module_list.length; i++) {
                if(this.ruleForm.module_list[i].connect.indexOf('style=\"text-align: center;\"') >-1 ){
                    this.ruleForm.module_list[i].connect = this.ruleForm.module_list[i].connect.replace(/style=\"text-align: center;\"/g,'class=\"ql-align-center\"')
                } 
                if(this.ruleForm.module_list[i].connect.indexOf('style=\"text-align: right;\"') >-1 ){
                    this.ruleForm.module_list[i].connect = this.ruleForm.module_list[i].connect.replace(/style=\"text-align: right;\"/g,'class=\"ql-align-right\"')
                }      
            }
        },

        changeModelList(){
            for (var i = 0; i < this.ruleForm.module_list.length; i++) {
                if(this.ruleForm.module_list[i].connect.indexOf('class=\"ql-align-center\"') >-1 ){
                    this.ruleForm.module_list[i].connect = this.ruleForm.module_list[i].connect.replace(/class=\"ql-align-center\"/g,'style=\"text-align: center;\"')
                } 
                if(this.ruleForm.module_list[i].connect.indexOf('class=\"ql-align-right\"') >-1 ){
                    this.ruleForm.module_list[i].connect = this.ruleForm.module_list[i].connect.replace(/class=\"ql-align-right\"/g,'style=\"text-align: right;\"')
                }  
        
            }
        },
      //修改数据发送请求
        updatedData(){
            this.changeModelList()
            if(this.posterimgshare){
                this.posterimgshare = this.posterimgshare
            }else if(!this.posterimgshare&&this.posterimg[0]){
                this.posterimgshare = this.posterimg[0]
            }else{
                this.posterimgshare = ''
            }
            this.$http.post('marketweb/actionback/updateBase',{
                keyAdmin:this.$store.state.keyAdmin,
                buildId:this.buildId,
                title:this.ruleForm.name,
                email:this.ruleForm.email,
                phone:this.ruleForm.phone,
                startDate:this.ruleForm.date1,
                endDate:this.ruleForm.date2,
                poiId:this.poiId,
                poiName:this.poiName,
                sponsorlogo:this.dialogImageUrl,
                buildName:this.buildName,
                asharetitle:this.ruleForm.asharetitle?this.ruleForm.asharetitle:this.ruleForm.name,
                asharedetail:this.ruleForm.asharedetail?this.ruleForm.asharedetail:this.buildName,
                ashareimg:this.posterimgshare,
                starttime:moment(this.ruleForm.time1).format('HH:mm:ss'),
                endtime:moment(this.ruleForm.time2).format('HH:mm:ss'),
                enrollStart:this.ruleForm.dateRange1,
                enrollEnd:this.ruleForm.dateRange2,
                place:this.ruleForm.desc,
                classifyId: this.ruleForm.choice?this.ruleForm.choice:0,
                taglistStr: JSON.stringify(this.tagCheckedName),
                modellistStr:JSON.stringify(this.ruleForm.module_list),
                posterlistStr:JSON.stringify(this.ruleForm.post_list),
                sponsorStatus:this.ruleForm.sponsorStatus ? 1 : 0,
                sponsorinfo:this.ruleForm.sponsorinfo,
                id: this.id
            }).then(response=>{
                if(response.body.code == 200){
                    this.$message({
                        message:'修改基本信息成功',
                        type:'success'
                    })
                  this.$emit('next')
                  this.$store.state.activityId = response.body.id

                }else{
                    this.$message.error(response.body.msg)
                    this.changeModelReverse()
                }
            },response=>{
              this.$message.error(response.body.msg)
               this.changeModelReverse()
            })
        },
      //提交
        submitForm (){
            let self = this;
            for (var i = 0; i < this.building.length; i++) {
                if(this.building[i].buildIdStr==this.buildId){
                    this.buildName = this.building[i].buildName
                }
            }
            if(this.shopList.length){
                for (var i = 0; i < this.shopList.length; i++) {
                    if(this.shopList[i].id == this.poiId){
                        this.poiName = this.shopList[i].poiName
                    }
                }
            }else{
               this.poiName = ''
            }
            if (this.buildId && this.ruleForm.name && this.ruleForm.date1 && this.ruleForm.date2 && this.ruleForm.time1 && this.ruleForm.time2 && this.ruleForm.dateRange1 && this.ruleForm.dateRange2 && this.ruleForm.sponsorStatus==false && this.ruleForm.building && this.ruleForm.module_list.length && this.ruleForm.post_list.length) {
                this.$confirm('确定修改基本信息, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'Info'
                }).then(() => {
                    self.updatedData()
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消操作'
                    });          
                });
            
            }else if(this.buildId && this.ruleForm.name && this.ruleForm.date1 && this.ruleForm.date2 && this.ruleForm.time1 && this.ruleForm.time2 && this.ruleForm.dateRange1 && this.ruleForm.dateRange2 && this.ruleForm.sponsorStatus && this.ruleForm.building && this.ruleForm.module_list.length && this.ruleForm.post_list.length){
                this.$confirm('确定保存基本信息, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'Info'
                }).then(() => {
                    self.updatedData()
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消操作'
                    });          
                });
            }else{
              this.$message.error('请填写完整信息')
            }
        },

        handleSort(filed,rev,primer){
            rev = (rev) ? -1 : 1;
            return function (a, b) {
                a = a[filed];
                b = b[filed];
                if (typeof (primer) != 'undefined') {
                    a = primer(a);
                    b = primer(b);
                }
                if (a < b) { return rev * -1; }
                if (a > b) { return rev * 1; }
                return 1;
            }
        },
      //获取编辑信息
        handleChangeData(){
            this.$http.post('marketweb/actionback/selectById',{
                keyAdmin:this.$store.state.keyAdmin,
                id:this.id
            }).then(response=>{
                this.getTagNameList()
                if (response.body.code == 200) {
                    this.action = response.body.action
                    this.building = response.body.buildList;
                    this.ruleForm.shopList = this.action.poiId;
                    this.classifylist = response.body.classifylist;
                    this.ruleForm.building = this.action.buildIdStr
                    this.buildId = this.action.buildIdStr;
                    this.FirstBuilding = this.buildId
                    this.classifyId = this.action.classifyId?this.action.classifyId:'';
                    this.ruleForm.choice = this.classifyId 
                    this.poiId = this.action.poiId;
                    this.dialogImageUrl = this.action.sponsorlogo;
                    this.ruleForm.name = this.action.title;
                    this.ruleForm.phone = this.action.phone;
                    this.ruleForm.email = this.action.email;
                    this.ruleForm.dateRange1 = new Date(this.action.enrollStart);
                    this.ruleForm.dateRange2 = new Date(this.action.enrollEnd);
                    this.ruleForm.date1 = this.action.startDate;
                    this.ruleForm.date2 = this.action.endDate;
                    this.ruleForm.time1 = this.timeFormat(this.action.starttime,1);
                    this.ruleForm.time2 = this.timeFormat(this.action.endtime,1);
                    this.ruleForm.desc = this.action.place;
                    this.tagCheckedName = this.action.taglist;
                    this.ruleForm.sponsorStatus = this.action.sponsorStatus == 1 ? true : false,
                    this.ruleForm.sponsorinfo = this.action.sponsorinfo,
                    this.ruleForm.asharetitle = this.action.asharetitle,
                    this.ruleForm.asharedetail = this.action.asharedetail,
                    this.posterimgshare = this.action.ashareimg,
                    this.ruleForm.module_list = this.action.modellist;
                    this.changeModelReverse()
                    this.ruleForm.post_list = this.action.posterlist;
                    for (var i = 0; i < this.ruleForm.post_list.length; i++) {
                        if (this.ruleForm.post_list[i].posterimg) {
                            this.posterimg.push(this.ruleForm.post_list[i].posterimg)
                        }
                    }
                }else{
                    this.$message.error(response.body.msg)
                }   
            },response=>{
                this.$message.error(response.body.msg)
            })
        }
    },

    created(){
      this.handleChangeData()
    },

    mounted(){
        this.editorOption.initmoduleButton()
       // this.editorOption1.initButton()
        
        
    },

    components:{
        quillEditor
    }
}
</script>
<style scoped>
.building-shop{
  width: 30%;
  display: inline-block;
}
.upload-share{
    width: 150px;
    height: 150px;
    text-align: center;
    line-height: 150px;
    font-size: 50px;
    border: 1px dotted #ddd;
}
.info-select{
  width: 40%;
}
.clear:after{
  content:".";
  dispaly:block;
  height:0;
  clear:both;
  visibility:hidden;
  }
.info-input{
  width: 70%;
}
.el-form{
    margin-top: 40px;
}
.set-btn{
  padding: 8px 10px;
}
.shop-name{
    width: 50%;
    display: inline-block;
}
.upload-img{
  padding: 30px 0px;
  text-align: center;
  margin: 5px;
  border: 1px dashed #aaa
}
.taglist{
  padding: 20px;
  width: 710px;
  background: #eee;
  border-radius: 10px;
  margin-bottom: 10px;
}
.taglist-checked{
  padding:0 5px;
  width: 710px;
}
.line{
    width: 7px;
    margin: 0 auto;
}
.result{
 text-align: center;
}
.codition{
    color: #aaa;
    font-size: 12px;
    padding-left:40px;
}
.transfer-footer {
    margin-left: 20px;
    padding: 6px 5px;
  }
  .quill-editor {
  height: 160px;
  color: #999;
  margin-bottom: 80px;
}
.ql-container {
    height: 120px;
    color: #999;
  }

.limit {
  height: 30px;
  line-height: 30px;
  text-align: right;
}
.limit span {
    color: #ee2a7b;
  }

.ql-snow .ql-editor img {
  max-width: 400px;
}

.ql-editor .ql-video {
  max-width: 400px;
}
.add-new-moudle{
    padding:10px 300px;
    margin-top: -45px;
    font-weight: bold;
    color: #aaa;
}
.quill-editor{
  color: #aaa;
}

.form-content-text{
    height: 120px;
}

.form-content{
    width: 360px;
}
.close{
    cursor: pointer;
    font-size: 18px;
    background: #f00;
    color: #fff;
    position: absolute;
    right: 6px;
    top: 6px;
    z-index: 10;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: 50%;
}
.moudle-title{
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    padding: 10px;
    width: 730px;
    background: #eee;
}
.el-transfer{
  padding-left: 200px;
}
.change-type{
    padding: 0 10px;
    color: #999;
    cursor: pointer;
}
.spondor{
  padding: 10px;
  background: #eee;
}
.change-type:hover{
    color: #569efe;
    text-decoration: underline;
}
.action-post-type{
  cursor: pointer;
}
.activity-post{
    display: flex;
    justify-content: space-between;
    padding: 10px;
    width: 730px;
    background: #eee;
}
.el-upload__tip{
  margin-top: 0;
  color: #f00;
  line-height: 2;
}
.tag-name{
  padding: 3px 4px;
  margin:3px 12px 3px 0;
}
.action-post{
  padding-right: 20px;
  text-align: center;
}
.action-post span{
  color: #569efe;
  padding: 20px 0;
  cursor: pointer;
}
.action-post span:hover{
  color: #aaa;
  text-decoration: underline;
}
.banner-link{
  margin-left: 20px;
}
.el-upload-dragger{
  width: 250px;
  height: 100px;
}
.post-list{
  margin:10px 0;
  padding: 0 20px 15px;
  width: 750px;
  border-bottom: 1px dashed #aaa;
  display: flex;
  justify-content: space-between;
}

</style>